<template>
  <div :id="`lineChart${index}`"></div>
</template>

<script>

  import { Chart } from '@antv/g2'

  export default {

    name: 'LineChart',
    props: ['value','index'],
    mounted() {
      this.initCharts()
    },
    methods: {
      findMaxMin(data) {
        let maxValue = 0;
        let minValue = 50000;
        let maxObj = null;
        let minObj = null;
        for (const d of data) {
          if (d.value > maxValue) {
            maxValue = d.value;
            maxObj = d;
          }
          if (d.value < minValue) {
            minValue = d.value;
            minObj = d;
          }
        }
        return { max: maxObj, min: minObj };
      },
      initCharts() {
        const chart = new Chart({
          container: `lineChart${this.index}`,
          autoFit: true,
          height: 400,
          padding: [50, 50, 50, 50]
        });
        chart.data(this.value);
        chart.scale({
          Date: {
            tickCount: 10
          },
          Close: {
            nice: true
          }
        });
        chart.axis('type', {
          title: null,
          tickLine: null,
          line: null
        });
        chart.legend(false)
        chart.line().position('type*value').color('value','#EBAC88');
        // annotation
        const { min, max } = this.findMaxMin(this.value);
        chart.annotation().dataMarker({
          top: true,
          position: [max.type, max.value],
          text: {
            content: '全部峰值：' + max.value
          },
          line: {
            length: 30
          }
        });
        chart.annotation().dataMarker({
          top: true,
          position: [min.type, min.value],
          text: {
            content: '全部谷值：' + min.value
          },
          line: {
            length: 50
          }
        });
        chart.render();
      }
    }
  }
</script>

<style scoped>

</style>
